<template>
    <div class="dashboard-editor-container">
        <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

        <el-row :gutter="32">
            <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col> -->
            <el-col :span="24" class="card-box">
                <el-card>
                    <div slot="header"><span>在册人员-总数</span></div>
                    <div class="chart-wrapper">
                        <pie-chart height="350px" ref="allUserNum" />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="32">
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>在册人员-工种</span></div>
                    <div class="chart-wrapper">
                        <pie-chart ref="workType" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div slot="header"><span>在册人员-性别</span></div>
                    <div class="chart-wrapper">
                        <pie-chart ref="userSex" />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="32">
            <el-col :span="24" class="card-box">
                <el-card>
                    <div slot="header"><span>现场人员趋势</span></div>
                    <el-date-picker
                        v-model="syncTime"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="请选择月份查询"
                        @change="this.userStatTrendList"
                        clearable
                    >
                    </el-date-picker>
                    <line-chart ref="userNum" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { userStatistics, userStatisticsByMonth } from "@/api/users";
import PanelGroup from '../../dashboard/PanelGroup'
import LineChart from '../../dashboard/LineChart'
import RaddarChart from '../../dashboard/RaddarChart'
import PieChart from '../../dashboard/PieChart'
import BarChart from '../../dashboard/BarChart'

const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
}

export default {
    name: 'Index',
    components: {
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart
    },
    data () {
        return {
            lineChartData: lineChartData.newVisitis,
            peoplePie: [],
            peoplePieLine: [],
            workTypePie: [],
            workTypeLine: [],
            userSexPie: [],
            userSexLine: [],
            userNumY: [],
            userNumX: [],
            item: '',
            syncTime: this.getNowTime()
        }
    },
    created () {
        this.getUserList();
        this.userStatTrendList()
    },
    methods: {
        handleSetLineChartData (type) {
            this.lineChartData = lineChartData[type]
        },
        //现场用户趋势
        userStatTrendList () {
            if (this.syncTime == null) {
                this.syncTime = this.getNowTime();
            }
            let queryParams = {
                monthStr: this.syncTime
            }
            userStatisticsByMonth(queryParams).then(response => {
                let userNumData = response.data.count5;
                this.userNumX = userNumData.users;
                this.userNumY = userNumData.days;
                this.$refs.userNum.initChart(this.userNumX, this.userNumY, '人员-数量');
            })
        },
        /** 查询用户列表 */
        getUserList () {
            userStatistics().then(response => {
                console.log(response.data)
                //在册人员总数
                let allPeople = response.data.count1;
                allPeople.forEach(item => {
                    this.peoplePie.push({
                        value: item.count,
                        name: item.name
                    });
                    this.peoplePieLine.push(item.name)
                });
                this.$refs.allUserNum.initChart(this.peoplePieLine, this.peoplePie);

                //在册人员工种
                let workTypeNum = response.data.count2;
                workTypeNum.forEach(item => {
                    this.workTypePie.push({
                        value: item.count,
                        name: item.name
                    });
                    this.workTypeLine.push(item.name)
                });
                this.$refs.workType.initChart(this.workTypeLine, this.workTypePie);

                //在册人员性别
                let userSexNum = response.data.count3;
                userSexNum.forEach(item => {
                    this.userSexPie.push({
                        value: item.count,
                        name: item.name
                    });
                    this.userSexLine.push(item.name)
                });
                this.$refs.userSex.initChart(this.userSexLine, this.userSexPie);

                //现场人员趋势图
                // let userNumData = response.data.count5;
                // this.userNumX = userNumData.users;
                // this.userNumY = userNumData.days;
                // this.$refs.userNum.initChart(this.userNumX, this.userNumY, '人员-数量');

            })
        },
        //处理默认选中当前日期
        getNowTime () {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            //    var defaultDate = `${year}-${month}-${date}${hour}`;
            var defaultDate = `${year}-${month}`;
            console.log(defaultDate)
            return defaultDate;
            this.$set(this.info, "stockDate", defaultDate);
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    
    height: calc(100vh - 120px);
    min-height: 100%;
    overflow-y: auto;

    .chart-wrapper {
        background: #fff;
        padding: 16px;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
</style>
